<template>
  <!-- 直播数据分析 -->
  <div class="bgdata" id="bgdata">
    <!-- 人气数值 -->
    <div class="mood" v-if="InfoData != null">
      <p class="slide"><span></span>人气数据</p>
      <div class="moodbox">
        <p>
          {{ format_num(InfoData.lookPeople) }}<span>累计观看人次</span>
        </p>
        <p>
          {{ format_num(InfoData.lookPeak) }}<span>观看人数峰值</span>
        </p>
        <div class="border bor1"></div>
        <p>
          {{ format_num(InfoData.avgonLinePeople)
          }}<span>平均在线人数</span>
        </p>
        <p>
          {{ format_num(InfoData.avgLookTime) }}<span>人均看播时长</span>
        </p>
        <div class="border bor2"></div>
        <p>{{ format_num(InfoData.favorite) }}<span>点赞数</span></p>
        <div class="border bor3"></div>
        <p>{{ InfoData.liveFanRate }}%<span>转粉率</span></p>
        <div class="border bor4"></div>
        <p class="mbfan">
          {{ format_num(InfoData.liveFanCount) }}<span>新增粉丝</span>
        </p>
        <p class="mbfans">
          {{ format_num(InfoData.fansClubPeopleNum)
          }}<span>粉丝团新增人数</span>
        </p>
      </div>
    </div>
    <!-- 带货数据 -->
    <div class="mood" v-if="InfoData != null">
      <p class="slide"><span></span>带货数据</p>
      <div class="moodbox">
        <p>{{ format_num(InfoData.liveSale) }}<span>本场销售额</span></p>
        <p>{{ format_num(InfoData.liveVolume) }}<span>本场销量</span></p>
        <div class="border bor1"></div>
        <p>{{ format_num(InfoData.livePro) }}<span>直播商品数</span></p>
        <p>{{ format_num(InfoData.clickCount) }}<span>点击量</span></p>

        <div class="border bor2"></div>
        <p>{{ format_num(InfoData.avgLook) }}<span>u价值</span></p>
        <div class="border bor3"></div>
        <p>{{ InfoData.clickCount }}%<span>转化率</span></p>
        <div class="border bor4"></div>

        <p class="mbfan">
          {{ format_num(InfoData.avgPrice) }}<span>客单价</span>
        </p>
        <p class="mbfans">
          {{ format_num(InfoData.priceRange)
          }}<span>直播商品价格区间</span>
        </p>
      </div>
    </div>
    <!-- 数据趋势 -->
    <div class="trend">
      <p class="slide"><span></span>数据趋势</p>

      <div>
        <div class="check">
          <span>互动指标</span>
          <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
            <el-checkbox
              v-for="(value, key) in cities"
              :label="value"
              :key="key"
              >{{ value }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="check">
          <span>观看指标</span>
          <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
            <el-checkbox
              v-for="city in cities1"
              :label="city"
              :key="city"
              >{{ city }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="check">
          <span>订单指标</span>
          <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
            <el-checkbox
              v-for="city in cities2"
              :label="city"
              :key="city"
              >{{ city }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>

      <div class="zanwu">
        <!-- v-if="active_name == '5' -->
        <div style="height: 480px; width: 100%">
          <liveLineChart
            :xData="xData01"
            :series1="y1Data01"
            :series2="y2Data01"
            :name1="name"
            :name2="name1"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import liveLineChart from "../component/liveLineChart.vue";
export default {
  data() {
    const cityOptions = { 1: "点赞次数", 5: "涨粉人数", 3: "粉丝团人数" };
    const cityOptions1 = ["实时在线人数", "实时进场人数"];
    const cityOptions2 = ["直播期间成交订单数", "直播期间成交金额"];
    return {
      proId: null,
      checkedCities: ["点赞次数"],
      cities: cityOptions,
      cities1: cityOptions1,
      cities2: cityOptions2,
      scareValue: 4, //口碑评分
      showMouthEchart: false, //口碑趋势
      showFansEchart: false, //粉丝总数
      showFabulousEchart: false, //点赞总数
      changeBoard: true,
      Introduction: null, //直播详情简介
      DetailInfo: null, // 直播达人信息
      InfoData: null, //人气数值
      keyword: "",
      dataOverView: {},
      pieGenderData: [],
      fansxData: [],
      fansDiYu: [],
      fansDiYu: [],
      proList: [], //商品列表
      showHotRoom: false, //直播数据弹窗
      FansDays: "近7天", //粉丝趋势
      FabulousDays: "近7天", //点赞趋势
      FansliveTime: "", //粉丝弹窗选择时间
      FabulousliveTime: "", //点赞弹窗选择时间
      FansStartEnd: "",
      FabulousStartEnd: "",
      //左侧echarts弹窗数据
      FansEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },

      FabulousEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },
      PraiseData: {},
      count: 0, //分页页数
      volume: 0, //累计销量
      amount: 0, //累计销售额
      page01: 1,
      page: 1,
      acts: [1, -1, -1], //tab 按钮
      res01: null,
      proKindList: [], //商品类目
      proKind: "全部",
      shopKindList: [], //小店分类
      shopKind: "全部",
      brandList: [], //商品品牌
      brand: "全部",
      liveBoxData: null, //直播间弹框单项数据
      name: "点赞次数",
      name1: "",
      xData01: [],
      y1Data01: [],
      y2Data01: [],
      type: [],
      /* 弹窗中的折线图 */
      vtrend: [],
      ptrend: [],
      tspans: [],
      showJgXl: true,
      shopValue: 0,
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      isUnfold2: false,
      showClass: 1
    };
  },
  components: {
    liveLineChart,
  },
  computed: {
    changeData() {
      const { proKind, shopKind, KindName, brand } = this;
      return {
        proKind,
        shopKind,
        KindName,
        brand
      };
    }
  },
  watch: {
    // 粉丝总数
    FansDays: function(newVal, oldVal) {
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    // 点赞总数
    FabulousDays: function(newVal, oldVal) {
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFabulousEchart();
    },
    changeData() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    // 搜索
    keyword: function(newVal, oldVal) {
      if (newVal == "") {
        this.proList = [];
        this.page = 1;
        this.getProList();
      }
    },
    /* 监听多选按钮 */
    checkedCities(n) {
      this.xData01 = [];
      this.y1Data01 = [];
      this.y2Data01 = []; // this.this.data_x = [];
      this.name = null;
      this.name1 = null;
      this.name = n[0];
      this.name1 = n[1];
      this.type = [];
      console.log(n);
      n.map(item => {
        if (item == "点赞次数") {
          this.type.push("1");
        } else if (item == "点赞次数") {
          this.type.push("1");
        } else if (item == "涨粉人数") {
          this.type.push("3");
        } else if (item == "粉丝团人数") {
          this.type.push("2");
        } else if (item == "实时在线人数") {
          this.type.push("8");
        } else if (item == "实时进场人数") {
          this.type.push("0");
        } else if (item == "直播期间成交订单数") {
          this.type.push("6");
        } else if (item == "直播期间成交金额") {
          this.type.push("7");
        }
        // console.log(this.type);
      });
      this.trend();
    }
  },
  created() {},
  mounted() {
    this.GetLiveIntroduction();
    this.GetAuthorDetailInfo();
    this.GetLiveInfoData();
    this.getFansPortrait();
    this.getProList();
    this.showChangeList(); //口碑评分
    this.getFansEchart(); //粉丝点赞
    this.getCateList(); //合作小店+商品类目
    this.GetBrandByRoomId(); //品牌
    this.trend(); //折线图
  },
  methods: {
    changeBg(e) {
      this.showClass = e;
    },
    getCondition(itemObj) {
      //商品类目
      this.proKind = itemObj.name;
      this.kindValue = itemObj.value;
    },
    getCondition2(itemObj) {
      console.log("itemObj");
      //点击达人行业选项
      this.shopKind = itemObj.name;
      this.shopValue = itemObj.value;
    },
    getCondition3(itemObj) {
      //点击达人行业选项
      this.shop = itemObj.name;
      this.shopValue = itemObj.value;
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    unfoldFn2() {
      this.isUnfold2 = !this.isUnfold2;
    },
    unfoldFn3() {
      this.isUnfold3 = !this.isUnfold3;
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
        }
      });
    },
    // 搜索
    toSearch() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    FansPicker() {
      //粉丝总数
      this.FansDays = "";
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    FabulousPicker() {
      //点赞总数
      this.FabulousDays = "";
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFansEchart();
    },
    // 口碑评分
    showChangeList() {
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            // authorId: this.authorId,
            authorId: 96987607056,
            trendType: 1
          }
        })
        .then(res => {
          this.scareValue = res.data.data.publicPraise;
          this.PraiseData = res.data.data;
        });
    },
    changeList(e) {
      if (this.changeBoard == e) return; //防止一直点击同一个按钮一直请求数据
      this.changeBoard = e;
      this.$axios
        .get("/api/Author/GetPublicPraiseTrend", {
          params: {
            // authorId: this.authorId,
            authorId: 96987607056,
            trendType: e ? 1 : 2
          }
        })
        .then(res => {
          this.scareValue = res.data.data.publicPraise;
          // this.percentage = res.data.data.percentage
          this.PraiseData = res.data.data;
        });
    },
    changeValue(e) {
      this.tspans = [];
      this.vtrend = [];
      this.ptrend = [];
      if (this.showJgXl == e) return; //防止一直点击同一
      this.showJgXl = e;
      this.GetLiveVolPriByPro();
    },
    // 获取左侧粉丝图表数据
    getFansEchart() {
      switch (this.FansDays) {
        case "近7天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate1 = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate1 = this.FansliveTime[0];
          this.endDate1 = this.FansliveTime[1];
          break;
      }
      this.FansliveTime = [this.startDate1, this.endDate1];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            // AuthorId: this.authorId,
            AuthorId: 96987607056,
            trendType: 1,
            star_time: this.startDate1,
            end_time: this.endDate1
          }
        })
        .then(res => {
          let that = this;
          if (res.data.code == 0) {
            this.FansEchart.yData1 = res.data.data.datas1;
            this.FansEchart.yData2 = res.data.data.datas2;
            res.data.data.dates.forEach((item, index) => {
              that.FansEchart.xData.push(that.timestamp(item, "Y-M-D"));
              return that.FansEchart.xData;
            });
          }
        });
    },
    // 获取左侧点赞趋势图表数据
    getFabulousEchart() {
      switch (this.FabulousDays) {
        case "近7天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 1,
            "Y-M-D"
          );
          this.startDate2 = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startDate2 = this.FabulousliveTime[0];
          this.endDate2 = this.FabulousliveTime[1];
          break;
      }
      this.FabulousliveTime = [this.startDate2, this.endDate2];
      this.$axios
        .get("/api/Author/GetFansFavoriteTrend", {
          params: {
            // AuthorId: this.authorId,
            AuthorId: 96987607056,
            trendType: 2,
            star_time: this.startDate2,
            end_time: this.endDate2
          }
        })
        .then(res => {
          this.FabulousEchart.yData1 = res.data.data.datas1;
          this.FabulousEchart.yData2 = res.data.data.datas2;
          res.data.data.dates.forEach((item, index) => {
            this.FabulousEchart.xData.push(this.timestamp(item, "Y-M-D"));
            return this.FabulousEchart.xData;
          });
        });
    },
    // 获取--直播详情简介信息
    GetLiveIntroduction() {
      console.log(this.$route.params.id);
      this.$axios
        .get("/api/live/GetLiveIntroduction", {
          params: {
            roomId: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.Introduction = res.data.data;
          }
        });
    },
    // 获取--直播达人详情
    GetAuthorDetailInfo() {
      this.$axios
        .get("/api/author/GetAuthorDetailInfo", {
          params: {
            //
            // AuthorId:id,  //达人id
            AuthorId: "96987607056"
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.DetailInfo = res.data.data;
            this.dataOverView = res.data.data.dataOverView;
          }
        });
    },
    // 获取--人气数据+带货数据
    GetLiveInfoData() {
      this.$axios
        .get("/api/live/GetLiveInfoData", {
          params: {
            // roomId:id,  //直播间id
            roomId: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.InfoData = res.data.data;
          }
        });
    },
    // 商品和小店分类
    getCateList() {
      let that = this;
      that.$axios
        .get(
          "/api/live/cate",
          {
            params: {
              // roomId: that.$route.params.id,
              roomId: this.$route.params.id
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.proKindList = res.data.data.cateList;
            that.shopKindList = res.data.data.shopList;
            that.getProList();
            that.setCondition();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品品牌
    GetBrandByRoomId() {
      let that = this;
      that.$axios
        .get(
          "api/live/GetBrandByRoomId",
          {
            params: {
              roomId: that.$route.params.id
              // roomId: "6960648770119863054"
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            this.brandList = res.data.data;
            that.getProList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品列表
    getProList() {
      let that = this;
      that.loading = true;
      // 商品类目
      let proCateId = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proCateId = item.value;
        }
      });
      let proIds = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proIds = item.proIds;
        }
      });

      // 小店分类
      let shopId = 0;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopId = item.value;
        }
      });
      // shopIds
      let shopIds = null;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopIds = item.shopIds;
        }
      });
      // 商品品牌
      let roomid = 0;
      that.brandList.map((item, index) => {
        if (item.brandName == this.brand) {
          roomid = item.value;
        }
      });
      let roomids = 0;
      that.brandList.map((item, index) => {
        if (item.brandName == this.brand) {
          roomids = item.roomids;
        }
      });
      that.$axios
        .post(
          "/api/live/prosearch1",
          {
            roomId: that.$route.params.id,
            // roomId: "6960648770119863054",
            proIds: proIds,
            proCateId: proCateId,
            shopId: shopId,
            shopIds: shopIds,
            key: this.trimStr(that.keyword),
            page: that.page,
            size: 8,
            brandId: roomid,
            sort: "Volume" //销量=Volume，销量额=Amount
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.page += 1;
            that.proList = that.proList.concat(res.data.data.data);
            this.count = res.data.count;
            this.volume = res.data.data.volume;
            this.amount = res.data.data.amount;
            this.proId = res.data.data.proId;
            res.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);
          } else {
            that.busy = true;
          }
          that.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取--观众画像
    getFansPortrait() {
      this.$axios
        .get("api/live/analysis", {
          params: {
            // authorId: this.$route.params.id,
            // roomId: "6978691343359249166"
            roomId: this.$route.params.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.pieGenderData = res.data.data.fansSexList;
            this.fansxData = res.data.data.fansAgeList;
            this.fansDiYu = res.data.data.fansFrom;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /* 折线图 */
    trend() {
      let that = this;
      this.$axios
        .get("api/live/trend", {
          params: {
            // authorId: this.$route.params.id,
            roomId: this.$route.params.id,
            type: this.type.toString(),
            markType: 0
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.saleNumList = res.data.data;
            if (res.data.data.dataUnix != null) {
              // x
              res.data.data.dataUnix.forEach(element => {
                that.xData01.push(that.timestamp(element, "h:m:s"));
                return that.xData01;
              });
              that.y1Data01 = res.data.data.trendData[1];
              that.y2Data01 = res.data.data.trendData[0];
            }
            that.finish01 = true;
            // console.log(this.y1Data01,this.y2Data01);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取直播间列表?????
    GetLiveRoomsByProId(liveDataItem) {
      this.liveBoxData = liveDataItem;
      let that = this;
      this.loading = true;
      this.GetLiveVolPriByPro();
      return;
    },
    /* 弹出框的折线图 */
    GetLiveVolPriByPro() {
      this.$axios
        .get("api/live/GetLiveVolPriByPro", {
          params: {
            roomId: this.$route.params.id,
            proId: this.proId
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            if (this.showJgXl == true) {
              this.vtrend = res.data.data.volumeTrend;
            } else {
              this.vtrend = res.data.data.priceTrend;
            }
            // this.ptrend = res.data.data.priceTrend
            res.data.data.timespans.forEach(element => {
              this.tspans.push(this.timestamp(element, "h:m:s"));
              return this.tspans;
            });
            this.tspans = this.tspans;
          }
        });
    },
    // 热门直播间分页
    changePage(n) {
      this.page01 = n;
      this.proList = [];
      this.getProList();
      this.$nextTick(() => {
        setTimeout(() => {
          // this.roomLoading = false;
        }, 500);
      });
    },
    // 弹窗分页
    changePages(n) {
      // this.page = n
      // this.proList = []
      // this.getProList()     //调取的接口需修改
      this.$nextTick(() => {
        setTimeout(() => {}, 500);
      });
    },
    /* 跳转连接 */
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/live/${id}`
      });
      window.open(router.href, "_blank");
    },
    /* tab按钮点击变色 */
    changeclass(n) {
      for (var i = 0; i < 4; i++) {
        this.acts.splice(i, 1, -1);
      }
      this.acts.splice(n, 1, 1);
    }
  }
};
</script>

<style lang="less" scoped>
.liveDetails {
  display: flex;
  padding: 14px;
  box-sizing: border-box;
  /* 左侧信息栏 */
  .boxleft {
    width: 300px;
    margin-right: 10px;
    // 直播信息
    .bltop {
      padding: 20px 0 0 20px;
      margin-bottom: 10px;
      .title {
        display: flex;
        margin-bottom: 30px;
        position: relative;
        .titlelogo {
          display: block;
          width: 50px;
          height: 50px;
          border-radius: 6px;
          margin-right: 10px;
        }
        .zhibo {
          position: absolute;
          bottom: 0;
          left: 32px;
          width: 18px;
          height: 18px;
          background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2),
            linear-gradient(#fff, #fff);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          border-radius: 6px 0px 4px 0px;
        }
        > p {
          width: 197px;
          font-size: 16px;
          line-height: 24px;
          color: #222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          span {
            display: inline-block;
            width: 19px;
            height: 16px;
            img {
              display: block;
            }
          }
        }
        p:nth-of-type(1) {
          span {
            margin-right: 4px;
          }
        }
      }
      .bltime {
        width: 260px;
        font-size: 12px;
        color: #888888;
        padding-bottom: 20px;
        span {
          display: inline-block;
          width: 120px;
          margin-left: 26px;
          color: #222222;
        }
      }
      .bltime:nth-of-type(3) {
        width: 260px;
        border-bottom: solid 1px #efefef;
      }
      .blbtn {
        // padding: 16px 0 20px 40px;  //一个按钮时
        padding: 20px 0;
        transform: translateX(-10px);
        text-align: center;
        span {
          display: inline-block;
          width: 80px;
          line-height: 30px;
          border-radius: 4px;
          border: solid 1px #1779ff;
          font-size: 14px;
          color: #1779ff;
          text-align: center;
          cursor: pointer;
        }
        span:nth-of-type(2) {
          margin-left: 20px;
        }
      }
    }
    // 直播达人信息
    .blbot {
      padding: 20px 0 0 20px;
      .portrait {
        display: flex;
        margin-bottom: 30px;
        img {
          display: inline-block;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
        }
        p {
          font-size: 16px;
          color: #222222;
          padding: 7px 0 8px 10px;
          width: 196px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          span {
            display: block;
            font-size: 12px;
            color: #888;
          }
        }
      }
      .infor {
        padding-bottom: 20px;
        font-size: 12px;
        color: #888;
      }
      .sex {
        //性别
        img,
        span {
          margin-left: 52px;
        }
      }
      // 口碑
      .mouth {
        display: flex;
        p {
          margin-right: 26px;
        }
        .info_item-right {
          display: flex;
          span:nth-of-type(1) {
            margin-right: 5px;
          }
          img {
            width: 13px;
            height: 13px;
            margin-left: 7px;
            margin-top: 2px;
            cursor: pointer;
          }
        }
      }
      // 总数
      .in-num {
        span {
          display: inline-block;
          margin-left: 26px;
        }
        img {
          width: 13px;
          height: 13px;
          margin-left: 5px;
          margin-top: -3px;
          cursor: pointer;
        }
      }
    }
  }
  /* 右侧数据栏 */
  .boxright {
    flex: 1;
    // tab按钮
    .tabbtn > a {
      display: inline-block;
      width: 129px;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border-radius: 4px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #555;
      text-align: center;
      text-decoration: none;
    }
    dl {
      display: flex;
      font-size: 14px;
      margin-bottom: 10px;
      // margin-top: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      dt {
        padding-top: 6px;
        // width: 78px;
        margin-right: 20px;
        flex-shrink: 0;
        color: #888;
      }
      dd {
        position: relative;
        color: #555;
        height: 32px;
        overflow: hidden;
        .cg_items {
          // position: relative;
          display: inline-block;
          font-size: 0;
          span {
            display: inline-block;
            height: 32px;
            padding: 0 16px;
            // margin-bottom: 5px;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            vertical-align: middle;
            &.active {
              color: #1779ff;
              background-color: #ebf3ff;
              border-radius: 4px;
            }
          }
          i {
            position: absolute;
            display: none;
            right: 0;
            top: 6px;
            font-size: 14px;
            font-style: normal;
            color: #1779ff;
            cursor: pointer;
          }
        }
        &.overstep {
          padding-right: 22px;
          .cg_items {
            i {
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        &.is_unfold {
          padding-right: 0;
          height: inherit;
          .cg_items {
            i {
              position: inherit;
            }
          }
        }
      }
    }
    // 数据（内容）
    .main {
      height: 778px;
      overflow-y: auto;
      padding: 20px 0 0 20px;
    }
    /* 直播数据分析-人气数值 */
    .moodbox {
      padding-top: 33px;
      display: flex;
      flex-wrap: wrap;
      width: 80.5%;
      margin: 0 auto 40px auto;
      p {
        width: 12.4%;
        // padding: 6px 32px 0 32px;
        line-height: 1;
        font-size: 22px;
        color: #222222;
        font-family: DINAlternate-Bold;
        text-align: center;
        span {
          display: block;
          font-size: 12px;
          font-weight: normal;
          color: #888;
          padding-top: 12px;
        }
      }
    }
    /* 数据趋势 */
    .trend {
      .check:nth-of-type(1) {
        margin-top: 30px;
      }
      .check {
        display: flex;
        margin-bottom: 20px;
        span {
          display: block;
          font-size: 14px;
          color: #888;
          margin-right: 30px;
        }
      }
      .zanwu {
        height: 484px;
      }
    }
    /* 搜索框 */
    .searchBox {
      margin-top: 17px;
      margin-bottom: 10px;
      width: 308px;
      height: 40px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eed5d5;
      .el-input {
        line-height: 40px;
      }
      .el-input__inner {
        flex: 1;
        background-color: #fff;
        border: solid 1px #e5e5e5;
        height: 40px;
        line-height: 40px;
        border-radius: 4px 0 0 4px;
      }
      .imgBox {
        height: 40px;
        width: 38px;
        background: #1779ff;
        border-radius: 0px 4px 4px 0px;
        cursor: pointer;
        place-items: center;
        position: relative;
        img {
          width: 15px;
          height: 15px;
          position: absolute;
          top: 30%;
          left: 25%;
        }
      }
    }
    /* 统计表 */
    .census {
      display: flex;
      div {
        width: 354px;
        line-height: 50px;
        background-color: #f5f5f5;
        margin: 0 20px 10px 0;
        padding: 0 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        p {
          color: #888;
        }
        span {
          display: block;
          color: #222;
        }
      }
    }
    /* 商品表格 */
    .last_list {
      margin-bottom: 40px;
    }
    table {
      text-align: center;
      margin-top: 14px;
      margin-bottom: 20px;
      thead {
        img {
          width: 5px;
          height: 10px;
          vertical-align: 0;
          margin-right: 2px;
          cursor: pointer;
        }
        tr {
          th {
            padding: 0 2px;
          }
          th:first-child {
            text-align: left;
            padding-left: 24px;
          }
          th:nth-child(2) th:nth-child(3),
          th:nth-child(4),
          th:nth-child(5),
          th:nth-child(6),
          th:nth-child(7) {
            width: 11%;
          }
          th:nth-child(8) {
            width: 14%;
          }
        }
      }
      tbody {
        tr {
          height: 78px;
          td {
            padding: 0 2px;
          }
          td:nth-child(1),
          td:nth-child(3),
          td:nth-child(4),
          td:nth-child(5),
          td:nth-child(6),
          td:nth-child(7) {
            font-family: DINAlternate-Bold;
            font-size: 15px;
            color: #222222;
          }
          td:last-of-type {
            span {
              display: block;
              width: 88px !important;
              margin: 0 auto;
              line-height: 32px;
              background: #fd7f2c;
              font-size: 14px;
              color: #fff;
              text-align: center;
            }
          }
        }
        .rankNum {
          font-size: 15px;
        }
      }
      // 数量
      .numBox {
        span:nth-of-type(1) {
          font-size: 16px !important;
        }
      }
      // 商品
      .rightBox {
        display: flex;
        align-items: center;
        padding-left: 24px;
        .picture {
          width: 50px;
          height: 50px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            object-fit: cover;
          }
        }
        .info {
          margin-left: 10px;
          text-align: left;
          .info_top {
            font-size: 14px;
            color: #222222;
            font-weight: 600;
            width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            img {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }
          }
          .info_btm {
            font-size: 13px;
            color: #888888;
            margin-top: 4px;
          }
        }
      }
      // 操作
      .optionBox {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 32px;
          height: 32px;
          margin-right: 16px;
          cursor: pointer;
        }
        img:last-child {
          margin-right: 0;
        }
        .optionBox-details {
          width: 88px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          color: #fff;
          margin: 0 auto;
          cursor: pointer;
        }
        .optionBox-details:hover {
          background-color: #ff924b;
        }
      }
    }
  }
  /* 观众画像 */
  .viewerbox {
    display: flex;
    // 观众画像
    .vbleft {
      width: 51.3%;
      .second_hua {
        margin-top: 30px;
        height: 60px;
      }
      .second_echart {
        height: 300px;
      }
    }
    // 观众来源分析
    .vbright {
      width: 48.6%;
    }
  }
  /* 弹出框折线图 */
  .popup_wrap {
    padding: 20px 30px 0;
    .popup_wrap-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #222;
      }
      .switch {
        display: flex;
        .switch-btn {
          width: 50px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          background-color: #fff;
          border: 1px solid #efefef;
          box-sizing: border-box;
          cursor: pointer;
        }
        .switch-btn:first-child {
          border-radius: 6px 0px 0px 6px;
          border-right: none;
        }
        .switch-btn:last-child {
          border-radius: 0px 6px 6px 0px;
        }
        .native {
          background-color: #1779ff;
          color: #fff;
        }
      }

      .time_slot {
        // height: 62px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .tab01 {
          margin-right: 20px;
        }
      }
    }
    .popup_wrap-explain {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 28px;
      span {
        margin-right: 4px;
      }
      .text {
        font-size: 13px;
        color: #555;
        margin-left: 18px;
        .num {
          color: #fd7f2c;
        }
      }
    }
    .popup_wrap-echart {
      width: 100%;
      height: 300px;
    }
    .m-t30 {
      margin-top: 30px;
    }
  }
}
/* 搜索框 */
.el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
}
/* 直播间弹框--直播数据 */
.hotRoomBox {
  padding: 20px 30px 0 30px;
  box-sizing: border-box;
}
/* 直播间弹框--销量趋势图 */
.trends {
  padding: 20px 30px 0 30px;
  box-sizing: border-box;
  position: relative;
}
.hbnumbox {
  //商品直播数据
  > p {
    margin-bottom: 20px;
  }
  .hbnum {
    display: flex;
    border-bottom: 1px solid #efefef;
    img {
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 6px;
      margin-right: 10px;
      margin-bottom: 20px;
      border: 1px solid #e5e5e5;
    }
    p {
      font-size: 14px;
      color: #222;
      padding-top: 4px;
      span {
        display: block;
        color: #888;
      }
    }
  }
  .datas {
    display: flex;
    margin: 30px 0 38px 0;
    div:last-of-type {
      border-right: 0;
    }
    p {
      width: 24.6%;
      font-size: 24px;
      color: #222;
      text-align: center;
      padding-right: 50px;
      padding-left: 50px;
      span {
        display: block;
        font-size: 12px;
        color: #888;
        padding-top: 10px;
      }
    }
  }
}
/* 弹窗中的分页 */
.pageBoxs {
  text-align: center;
  margin: 12px 0 20px 0;
}
/* 圆角 */
.fillet {
  border-radius: 4px;
  background-color: #fff;
}
/* 侧边 */
.slide {
  line-height: 1;
  font-size: 16px;
  color: #222222;
  font-weight: 600;
  border-left: 4px solid #1779ff;
  padding-right: 6px;
}
.slide > span {
  display: inline-block;
  width: 4px;
}
/* 小手 */
.hands {
  cursor: pointer;
}
/* 边框 */
.border {
  width: 1px;
  border-left: 1px solid #efefef;
}
/* 响应式 */
@media screen and (max-width: 1400px) {
  #liveDetails .moodbox {
    display: flex;
    flex-wrap: wrap;
    p {
      width: 16%;
    }
    .mbfan {
      margin-top: 30px;
    }
    .mbfans {
      margin-top: 30px;
    }
    .bor4 {
      border: 0 !important;
    }
  }
}
/*  */
.switch {
  display: flex;
  width: 108px;
  height: 28px;
  position: absolute;
  right: 98px;
  top: 12px;
  .switch-btn {
    width: 50px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    color: #555;
    background-color: #fff;
    border: 1px solid #efefef;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  .switch-btn:first-child {
    border-radius: 6px 0 0 6px;
    border-right: none;
  }
  .switch-btn:last-child {
    border-radius: 0 6px 6px 0;
    border-right: none;
  }
}
.switch .native {
  background-color: #1779ff;
  color: #fff;
}
/* tab 按钮的默认选中状态 */
.showClass {
  background-color: #1779ff !important;
  color: #ffff !important;
}
</style>
